vue+elementUI+axios实现的全局loading加载动画 |
您所在的位置：网站首页 › vue 转圈动画 › vue+elementUI+axios实现的全局loading加载动画 |
|
在项目中，很多时候都需要loading加载动画来缓解用户的焦虑等待，比如说，我打开了一个页面，而这个页面有很多接口请求，但浏览器的请求并发数就那么几个，再加上如果网速不行的话，那么这时候，用户很可能就会纠结自己到底该不该留下来继续等待呢。 所以，这时候，loading动画就是一种缓解等待情绪的方式，当然还有更高端的，比如：骨架屏。有兴趣的朋友可以自行研究，我后续也会找机会分享一下。 下面，开始本文的主要内容，目前我在用的是Vue 2.x版本，ajax请求用的是axios，UI框架用的是elementUI。所以下面的loading用的是UI框架中的组件。 唠叨了这么多，接下来分享一下具体实现的代码（里面很多代码逻辑我已经去掉了，只剩下基础的部分）： 代码可放在main.js中。 import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import axios from 'axios' // loading框设置局部刷新，且所有请求完成后关闭loading框 let loading let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数 function startLoading () { loading = Vue.prototype.$loading({ lock: true, text: '努力加载中...', background: 'rgba(0,0,0,0.5)', target: document.querySelector('.loading-area') // 设置加载动画区域 }) } function endLoading () { loading.close() } function showFullScreenLoading () { if (needLoadingRequestCount === 0) { startLoading() } needLoadingRequestCount++ } function hideFullScreenLoading () { if (needLoadingRequestCount { if (config.isLoading !== false) { // 如果配置了isLoading: false，则不显示loading showFullScreenLoading() } config.headers['Content-Type'] = 'application/json;' return config }, error => { hideFullScreenLoading() return Promise.reject(error.response) }) // http响应拦截器 axios.interceptors.response.use(data => { hideFullScreenLoading() // 响应成功关闭loading return data }, error => { hideFullScreenLoading() let _status = error.response && error.response.status if (_status === 504 || _status === 404) { // 跳转404页面（目前没有，只能先跳转首页） //router.push({ path: '/' }) } return Promise.reject(error) }) Vue.prototype.$http = axiosok，上面的代码就实现了全屏的loading动画。注意：loading的样式是可以自定义的，文案也是可以自定义的。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |